const lineStyle = {
    top: {
        position: "absolute",
        width: '100%',
        height: "5px",
        top: '0px',
        left: "0px",
        // backgroundColor: 'red',
        attribute: "top",
    },
    boottom: {
        position: "absolute",
        width: '100%',
        height: "5px",
        bottom: '0',
        left: "0px",
        // backgroundColor: 'red',
        attribute: "bottom",
    },
    left: {
        position: "absolute",
        width: '5px',
        height: "100%",
        top: '0',
        left: "0px",
        // backgroundColor: 'red',
        attribute: "left",
    },
    right: {
        position: "absolute",
        width: '5px',
        height: "100%",
        top: '0',
        right: "0px",
        // backgroundColor: 'red',
        attribute: "right",
    }
}
/* 自定义指令 */
export const getVue = (Vue) => {
    Vue.directive('focus', (el, binding) => {
        if (el.nodeName !== 'INPUT') el.querySelector('input').focus()
        el.focus()
    })
    Vue.directive('drag', (el, binding, vnode) => {
        el.onmousedown = (e) => {
            e.target.draggable = true;
        };
    })
    Vue.directive('move', (el, binding, vnode) => {
        const dialog = el.querySelector('.el-dialog'); // 确保选择当前对话框存在
        if (!dialog) return;
        let isDragging = false;
        let offsetX, offsetY;

        const onMouseDown = (e) => {
            if (e.target.classList.contains('el-dialog')) {
                isDragging = true;
                offsetX = e.offsetX;
                offsetY = e.offsetY;
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
                document.addEventListener('mouseleave', onMouseLeave);
            }
        };

        const onMouseMove = (e) => {
            if (isDragging) {
                dialog.style.marginLeft = `${e.pageX - offsetX}px`;
                dialog.style.marginTop = `${e.pageY - offsetY}px`;
            }
        };

        const onMouseUp = () => {
            isDragging = false;
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            document.removeEventListener('mouseleave', onMouseLeave);
        };

        const onMouseLeave = () => {
            isDragging = false;
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            document.removeEventListener('mouseleave', onMouseLeave);
        };

        el.addEventListener('mousedown', onMouseDown);
    });
    Vue.directive('scale', {
        mounted(el, binding, vnode) {
            if (el.getAttribute('isHasScale')) {
                console.log('已添加dom');
            } else {
                el.setAttribute('isHasScale', true)
                el.style.position = 'relative'
                el.style.boxSizing = 'border-box'
                for (const key1 in lineStyle) {
                    const dom = document.createElement('div')
                    for (const key2 in lineStyle[key1]) {
                        dom.style[key2] = lineStyle[key1][key2]
                    }
                    dom.setAttribute('direction', lineStyle[key1].attribute)
                    dom.onmouseover = e => {
                        const direction = e.target.getAttribute("direction")
                        e.target.style.backgroundColor = "blue"
                        if (['top', 'bottom'].includes(direction)) {
                            e.target.style.cursor = "text"
                        } else {
                            e.target.style.cursor = "vertical-text"
                        }
                    }
                    dom.onmouseleave = e => {
                        e.target.style.backgroundColor = ""
                    }
                    el.parentElement.onmousedown = (e) => {
                        console.log(el);
                        const width = el.style.width ? el.style.width.split('px')[0] : el.offsetWidth
                        const height = el.style.height ? el.style.height.split('px')[0] : el.offsetHeight
                        e.stopPropagation()
                        const mousedownX = e.pageX
                        const mousedownY = e.pageY
                        const direction = e.target.getAttribute("direction")
                        el.parentElement.onmousemove = e => {
                            const mousemoveX = e.pageX
                            const mousemoveY = e.pageY
                            const x = mousedownX - mousemoveX
                            const y = mousedownY - mousemoveY
                            const parentWidth = el.parentElement.style.width ? el.parentElement.style.width.split('px')[0] : el.parentElement.offsetWidth
                            const parentHeight = el.parentElement.style.height ? el.parentElement.style.height.split('px')[0] : el.parentElement.offsetHeight
                            // console.log(mousedownY, mousemoveY, mousedownY - mousemoveY, y, height, width);
                            if (['top', 'bottom'].includes(direction)) {
                                if (el.style.height.split('px')[0] == parentHeight) return
                                el.style.height = height - y + 'px'
                            } else {
                                if (el.style.width.split('px')[0] == parentWidth) return
                                el.style.width = width - x + 'px'
                            }
                        }
                        document.querySelector('body').onmouseup = e => {
                            el.parentElement.onmousemove = null
                        }
                    };
                    el.appendChild(dom)
                }
            }
        }
    })
}